<template>
  <div class="app-container">
    <slot :list_type="list_type"></slot>
    <div class="filter-container">
      <el-select v-model="listQuery.sid" class="filter-item" style="width: 130px;" filterable clearable :loading="loading" placeholder="选择区服">
        <el-option v-for="item in serverList" :key="item.sid" :label="item.name + '(' + item.sid + ')'" :value="item.sid">
        </el-option>
      </el-select>
      <template v-if="list_type === 1">
        <el-date-picker v-model="listQuery.log_dt[0]" class="filter-item" type="date" style="width: 140px;" placeholder="记录时间"></el-date-picker>-
        <el-date-picker v-model="listQuery.log_dt[1]" class="filter-item" type="date" style="width: 140px;" placeholder="记录时间"></el-date-picker>
      </template>
      <el-input v-model="listQuery.actor_id" class="filter-item" style="width: 150px;" placeholder="角色ID" />
      <el-input v-model="listQuery.hero_id" class="filter-item" style="width: 100px;" placeholder="英雄ID" />
      <el-input v-model="listQuery.quality" class="filter-item" style="width: 100px;" placeholder="品质" />
      <el-select v-model="listQuery.best" class="filter-item" style="width: 130px;" filterable clearable :loading="loading" placeholder="全部英雄">
        <el-option label="最强五人" value="1"></el-option>
        <el-option label="非最强五人" value="0"></el-option>
      </el-select>
      <el-select v-model="listQuery.top_power" class="filter-item" style="width: 130px;" filterable clearable :loading="loading" placeholder="战力排名">
        <!-- <el-option label="全部战力排名" value=""></el-option> -->
        <el-option label="战力前5" value="5"></el-option>
        <el-option label="战力前10" value="10"></el-option>
        <el-option label="战力前15" value="15"></el-option>
      </el-select>
      <el-date-picker v-model="listQuery.last_update_time[0]" class="filter-item" type="date" style="width: 140px;" placeholder="最后更新时间"></el-date-picker>-
      <el-date-picker v-model="listQuery.last_update_time[1]" class="filter-item" type="date" style="width: 140px;" placeholder="最后更新时间"></el-date-picker>

      <el-button class="filter-item" type="primary" plain icon="el-icon-search" @click="handleFilter">搜索</el-button>
      <el-button :loading="downloadLoading" type="primary" icon="el-icon-download" class="filter-item" @click="handleDownload()">导出</el-button>
    </div>
    <el-table ref="table" v-loading="listLoading" :data="list" stripe border class="table-content" height="735" @sort-change="sortchange">
      <el-table-column v-for="(column, index) in columns" :key="index" :prop="column.prop" :label="column.label" :width="column.width || '70'" :align="column.align || 'center'" :fixed="column.fixed || false" :sortable="column.sortable || false">
        <template slot-scope="{ row }">
          <span v-if="column.formatter">{{ column.formatter(row) }}</span>
          <span v-else>{{ row[column.prop] }}</span>
        </template>
      </el-table-column>
      <!-- 动态生成铭文列 -->
      <el-table-column
        v-for="(column, index) in runeColumns"
        :key="'rune-' + index"
        :label="column.label"
        :width="column.width"
        :align="column.align || 'center'"
        :formatter="column.formatter"
        :prop="column.prop"
      >
      </el-table-column>
      <!-- 动态生成装备列 -->
      <el-table-column
        v-for="(column, index) in equipmentColumns"
        :key="'equipment-' + index"
        :label="column.label"
        :width="column.width"
        :align="column.align || 'center'"
        :formatter="column.formatter"
        :prop="column.prop"
      >
      </el-table-column>
      <!-- 动态生成淬炼属性列 -->
      <el-table-column
        v-for="(column, index) in quenchingColumns"
        :key="'quenching-' + index"
        :label="column.label"
        :width="column.width"
        :align="column.align || 'center'"
        :formatter="column.formatter"
        :prop="column.prop"
      >
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
  </div>
</template>

<script>

import waves from '@/directive/waves'
import Pagination from '@/components/Pagination'
import { getActorHeroList } from '@/api/actorInfo'
import { getServerList } from '@/api/ops'
import { deepClone } from '@/utils/index'
import actorHeroField from '@/utils/actorHero'
export default {
  name: 'ActorHeroList',
  components: { Pagination },
  directives: { waves },
  props: {
    list_type: { type: Number, default: 0 }
  },
  data() {
    return {
      list: [],
      serverList: [],
      internalListType: 0,
      total: 0,
      loading: false,
      listLoading: false,
      downloadLoading: false,
      listQuery: {
        page: 1,
        limit: 200,
        sid: '',
        actor_id: '',
        hero_id: '',
        quality: '',
        last_update_time: [],
        log_dt: ['', ''],
        top_power: '',
        best: ''
      },
      exportList: [],
    }
  },
  computed: {
    allColumns() {
      return actorHeroField(this.list_type)
    },
    columns() {
      return this.allColumns.filter(item => (item.group === 'base'))
    },
    runeColumns() {
      return this.allColumns.filter(item => (item.group === 'rune'))
    },
    equipmentColumns() {
      return this.allColumns.filter(item => (item.group === 'equipment'))
    },
    quenchingColumns() {
      return this.allColumns.filter(item => (item.group === 'quenching'))
    },
    tHeader() {
      return this.allColumns.map((column) => column.label)
    },
    filterVal() {
      return this.allColumns.map((column) => column.prop)
    }

  },
  mounted() {
    console.log('Received list_type:', this.list_type) // 检查接收到的 prop 是否正确
  },
  created() {
    this.getServerList()
    console.log(this.list_type)
    console.log(this.allColumns.map(item => item.prop))
  },
  methods: {
    async getList() {
      console.log(this.list_type)
      const query = Object.assign(this.listQuery, { day_type: this.list_type })
      this.listLoading = true
      const res = await getActorHeroList(query)
      this.listLoading = false
      this.list = res.data.items
      this.total = res.data.total
      this.$nextTick(() => {
        this.$refs.table.doLayout()
      })
    },
    handleFilter(query) {
      this.getList()
    },
    async getServerList(params) {
      const query = params
      const res = await getServerList(query)
      this.serverList = res.data.items
      this.loading = false
    },
    sortchange(column) {
      this.listQuery.sortName = column.prop
      this.sortBy(column.order)
    },
    sortBy(order) {
      if (order === 'ascending') {
        this.listQuery.sortType = 'asc'
      } else {
        this.listQuery.sortType = 'desc'
      }
      this.getList()
    },
    handleDownload() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = this.tHeader
        const filterVal = this.filterVal
        getActorHeroList(Object.assign({}, this.listQuery, { export: 1 })).then(response => {
          this.dlist = response.data.items
          const data = this.dlist.map(row => {
            return filterVal.map((j, index) => {
              // 获取当前列的配置
              const column = deepClone(this.allColumns[index]) // allColumns 是合并后的所有列配置
              if (column.formatter) {
                return column.formatter(row, this.allColumns[index])
              }
              // 如果没有 formatter 方法，直接返回原始值
              return row[j]
            })
          })
          excel.export_json_to_excel({
            header: tHeader,
            data,
            filename: this.day_type === 1 ? '每日英雄' : '玩家英雄'
          })
          this.downloadLoading = false
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.filter-container .filter-item {
  margin-bottom: 0px;
}

.filter-container {
  margin-bottom: 10px;
}
</style>
